<template>
  <div >
    <div style=" float: right; margin-right: 5%" >
      <a-space size="large">
        <div class="head_item">{{ inputName }}</div>
        <div class="head_item">
          <a-upload
            name="头像"
            list-type="picture"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              alt="avatar"
              style="height: 75px; width: 75px; border-radius: 50%"
            />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </div>
        <div class="head_item">
          <router-link to="/">
            <span class="spanfour" @click="output">退出登录 <a-icon type="logout" /></span>
          </router-link>
        </div>
      </a-space>
    </div>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}

import { saveUpload, getUpload } from "@/utils/api.js";

export default {
  name: "Header",
  components: {},
  props: {
    inputName: String,
  },
  data() {
    return {
      loading: false,
      imageUrl: "",
      tno: ""
    };
  },
  created() {
    this.tno = JSON.parse(sessionStorage.getItem("along")).root.userinfo.tno;
    const param = new URLSearchParams();
    param.append("tno",this.tno)
    getUpload(param).then((res) => {
      if(res.success) this.imageUrl = `http://39.108.50.102:9090/${this.tno}.jpg`
    })
  },
  methods: {
    output() {
      this.$router.push({ path: "/" });
      sessionStorage.removeItem("along");
      localStorage.removeItem("along");
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        getBase64(info.file.originFileObj, (imageUrl) => {
          saveUpload({
            id: this.tno,
            base64: imageUrl
          }).then((res) => {
            if (res.success == true) this.imageUrl = imageUrl;
          });
          this.loading = false;
        });
        
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpg和png格式");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片大小不能超过2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
<style>
.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix::before {
  *zoom: 1;
}
.head_item {
  float: right;
}
</style>